<template>
  <div>
    <a-row type="flex" justify="space-around" align="middle" class="guider">
      <a-col :span="22" class="max-width-900">
        <a-input placeholder="keywords"
                 size="large"
                 v-model="keyword" @keyup.enter="getArticleList">
          <a-icon slot="prefix" type="search"/>
        </a-input>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" align="middle" class="article-list">
      <a-col :span="22" class="max-width-900">
        <a-list itemLayout="vertical" :dataSource="data" size="small" :loading="loading">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <a slot="title" @click="openArticle(item.id)">{{item.title}}</a>
              <p slot="description">{{getAbstract(item.content)}}</p>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import api from '../api'
  import summary from '@/core/summary'
  import {compiler} from "@/core/compiler";

  const tag_rx = /<.+?>|<\/.+?>/ig

  export default {
    name: 'home',
    data () {
      return {
        loading: false,
        keyword: "",
        data: [],
      }
    },
    mounted () {
      let keyword = this.$route.query.keyword
      if (keyword) {
        this.keyword = keyword
      }
      this.getArticleList()
    },
    methods: {
      getArticleList () {
        this.loading = true
        let params = {
          keyword: this.keyword
        }
        api.getArticleList(params).then(resp => {
          this.data = resp.data.data
        }).finally(() => {
          this.loading = false
        })
      },
      getAbstract (content) {
        content = compiler.compile(summary(content))
        return content.replace(tag_rx, '')
      },
      openArticle (id) {
        this.$router.push({name: 'article-detail', params: {id}})
      }
    },
  }
</script>

<style lang="less" scoped>
  .guider {
    width: 100%;
    background: #1DA57A;
    height: 200px;
    text-align: center;
  }

  .article-list {
    margin-top: 30px;
  }
</style>
